<template>
  <div class="js-export-excel-view">
    <div class="top-view">
      <p>提示：</p>
      <p class="value gray">node.js 版本要在 10.13.0 版本以上运行</p>
      <p class="value gray">安装： yarn add js-export-excel</p>
      <p>
        npm 地址：<a href="https://www.npmjs.com/package/js-export-excel"
          >npm js-export-excel 用法</a
        >
      </p>
    </div>
    <div class="data-view">
      <p>输入数据：</p>
      <table>
        <tr>
          <th class="tab-list">姓名</th>
          <th class="tab-list-1">手机号</th>
          <th class="tab-list">年龄</th>
          <th class="tab-list">操作</th>
        </tr>
        <tr v-for="(item, index) in excelData" :key="index">
          <td class="tab-list">{{ item.name }}</td>
          <td class="tab-list-1">{{ item.mobile }}</td>
          <td class="tab-list">{{ item.age }}</td>
          <td class="tab-list" style="color: red" @click="deteleList(index)">
            删除
          </td>
        </tr>
        <tr>
          <td class="tab-list">
            <input
              class="input-view"
              placeholder="姓名"
              type="text"
              v-model="addData.name"
            />
          </td>
          <td class="tab-list">
            <input
              class="input-view"
              placeholder="手机号"
              type="text"
              v-model="addData.mobile"
            />
          </td>
          <td class="tab-list">
            <input
              class="input-view"
              placeholder="年龄"
              type="text"
              v-model="addData.age"
            />
          </td>
          <td class="tab-list" style="color: green" @click="addList">添加</td>
        </tr>
      </table>
    </div>
    <div class="btn" @click="getDownloadExcel">下载Excel</div>
    <div class="btn" @click="getDownloadZip">下载Excel.ZIP</div>
  </div>
</template>

<script>
import { Toast } from "vant";
// const ExportJsonExcel = require("js-export-excel");
export default {
  data() {
    return {
      excelData: [
        {
          name: "张三",
          mobile: "15100110400",
          age: "18",
        },
        {
          name: "tony",
          mobile: "15100110410",
          age: "18",
        },
        {
          name: "玄烨",
          mobile: "15100110420",
          age: "58",
        },
        {
          name: "胤禛",
          mobile: "15100110430",
          age: "48",
        },
      ],
      addData: {},
    };
  },
  methods: {
    deteleList(idx) {
      this.excelData.splice(idx, 1);
    },
    addList() {
      if (Object.keys(this.addData).length < 3) {
        return Toast.fail("请输入完整");
      }
      this.excelData.push(this.addData);
      this.addData = {};
    },
    getDownloadExcel() {
      let option = {};
      option.fileName = "用户信息";
      let sheetData = [];
      this.excelData.forEach((item, idx) => {
        sheetData.push({
          index: idx + 1,
          name: item.name,
          mobile: item.mobile,
          age: item.age,
        });
      });
      option.datas = [
        {
          sheetData: sheetData,
          sheetName: "sheet",
          sheetFilter: ["index", "name", "mobile", "age"],
          sheetHeader: ["序号", "姓名", "手机号", "年龄"],
          columnWidths: [2, 8, 8, 5],
        },
      ];
      try {
        // var toExcel = new ExportJsonExcel(option);
        // toExcel.saveExcel();
      } catch (error) {
        console.log("====");
      }
    },
    getDownloadZip() {},
  },
};
</script>

<style lang="scss">
.js-export-excel-view {
  .data-view {
    table {
      border-collapse: collapse;
    }
    table,
    td,
    th {
      border: 1px solid black;
    }
    tr {
      width: 100%;
    }
    .tab-list {
      width: 20%;
      text-align: center;
    }
    .tab-list-1 {
      width: 30%;
      text-align: center;
      box-sizing: border-box;
    }
    .input-view {
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
    }
  }
  .btn {
    display: inline-block;
    margin: 20px 10px 10px;
    padding: 5px 20px;
    border-radius: 8px;
    background-color: #67c23a;
    color: #fff;
    font-size: 12px;
  }
  .top-view {
    font-size: 14px;
    .gray {
      color: gray;
    }
    .label {
      margin: 8px;
    }
    .value {
      margin: 8px;
    }
  }
}
</style>